<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button v-prmis="'strategy_machine_bind'" type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('strategy.payee.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" height="730">

				<el-table-column prop="sm_id" label="ID" />

				<el-table-column prop="s_id" :label="$t('strategy.payee.name')">
					<template #default="scope">
						{{ scope.row.name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="m_id" :label="$t('machine.code')">
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="s_type" :label="$t('strategy.strategy.type')">
					<template #default="scope">
						{{ gettypes(scope.row.s_type) }}
					</template>
				</el-table-column>

				<el-table-column prop="sort" :label="$t('machine.types.sort')">
					<template #default="scope">
						{{ scope.row.sort || '0' }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button v-prmis="'strategy_machine_unbind'" type="danger" size="small"
							@click="del(scope.row.sm_id)"><el-icon>
								<Delete />
							</el-icon></el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.bind" @exposeData="current" @fraction="fraction" />

		</div>

		<el-dialog v-model="data.dialogVisible" :title="$t('strategy.payee.add')" center width="30%">
			<el-form v-if="data.dialogVisible" :model="data.adateg" :label-width="language=='en'?'120px':'100px'">

				<el-form-item :label="$t('strategy.strategy.type') + ':'" prop="s_type">
					<el-select v-model="data.adateg.s_type" :placeholder="$t('message.pleaseSelect')" @change="gettype">
						<el-option v-for="item in select_type" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('strategy.strategy.bind') + ':'" prop="s_id">
					<el-select v-model="data.adateg.s_id" :placeholder="$t('message.pleaseSelect')">
						<el-option v-for="item in data.sarr" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('strategy.strategy.bindMachine') + ':'" prop="m_id">
					<el-select v-model="data.macarr" :placeholder="$t('message.pleaseSelect')" multiple filterable
						@change="changemMacarr($event, 1)" @blur="onBlur">
						<el-option v-for="item in data.machine_arr" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item class="w-full dashed Button " v-if="data.grouping.length != 0">
					<div class=" pl-3 border border-dashed">
						<el-tag v-for="item, key of data.grouping" :key="key" closable :disable-transitions="false"
							class="mr-2 mb-2 mt-2" :type="item.value == undefined ? '' : 'warning'" size="large"
							@close="onClear(key)">
							{{ item.label }}
						</el-tag>
					</div>
				</el-form-item>

				<el-form-item :label="$t('machine.types.sort') + ':'" prop="sort">
					<el-input v-model.number="data.adateg.sort" type="number"
						:placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="submit()">{{ $t('public.save') }}</el-button>
						<el-button @click="data.dialogVisible = false">{{ $t('public.cancel') }}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import strategy from '@/utils/strategy'
import { getstrategyList, bindstrategy, unbindstrategy } from '@/api/strategy';
import { getmachineList } from '@/api/machine';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let select_type = [
	{ label: $t('strategy.strategy.payee'), value: 1 },
	{ label: $t('strategy.strategy.charging'), value: 2 },
	{ label: $t('strategy.manager.profit'), value: 3 },
	{ label: $t('system.wechat.wechat'), value: 4 },
	{ label: $t('system.wechat.WeChatApp'), value: 5 },
	{ label: $t('system.wechat.host'), value: 6 },
	{ label: $t('system.wechat.protocol'), value: 7 },
]


let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('strategy.strategy.type'), type: 'define', select: select_type, value: '', key: 's_type' }
	],
	list: [], // 列表信息
	machine_arr: [], // 设备列表
	macarr: [], // 选中的设备
	sarr: [], // 策略列表
	adateg: {
		s_id: '',
		m_id: '',
		s_type: 1,
		sort: 1,
	},
	bind: { // 筛选数据
		s_id: '',
		m_id: '',
		s_type: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	grouping: []
})
let changemMacarr = (e) => {
	let arr = []
	data.machine_arr.map((item) => {
		if (e.indexOf(item.value) !== -1) {
			arr.push(item)
		}
	})
	data.grouping = arr

}
// 删除选中的设备分组/设备
let onClear = (e) => {
	data.grouping.splice(e, 1)
}
let onBlur = () => {
	data.macarr = ''
}

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getstrategyList(data.bind).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 获取设备列表
let getmachine = () => {
	data.machine_arr = []
	getmachineList().then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				data.machine_arr.push({
					label: item.m_id + '-' + item.machine_id + '-' + item.machine_name,
					value: item.m_id
				})
			}
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.bind[key] = e[key]
	}
	data.bind.page = 1
	data.bind.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.bind.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.bind.pageNum = e
	getlist()
}

// 策略类型
let gettypes = (e) => {
	let text = '未知策略'
	for (let item of select_type) {
		if (item.value == e) {
			text = item.label
		}
	}
	return text
}

// 获取策略信息
let gettype = async (e) => {
	data.sarr = await strategy.getlist(e)
}

// 添加策略
let add = () => {
	gettype(1)
	data.adateg = {
		s_id: '',
		m_id: '',
		s_type: 1,
		sort: 1,
	}
	data.macarr = []
	data.dialogVisible = true
}

// 提交数据
let submit = () => {
	if (data.adateg.s_id == '') {
		ElMessage({
			message:  $t('message.pleaseBindStrategy'),
			type: 'error'
		})
		return
	}
	if (data.grouping.length == 0) {
		ElMessage({
			message: $t('message.pleaseBindMachine'),
			type: 'error'
		})
		return
	}
	let arr = data.grouping.map(item => item.value)
	let obj = {
		s_id: data.adateg.s_id,
		m_id: arr.join(','),
		s_type: data.adateg.s_type,
		sort: data.adateg.sort
	}
	bindstrategy(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.bindSuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 解除绑定
let del = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			unbindstrategy({ sm_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}



getlist()
getmachine()
</script>
